<template>
	<view class="page" :class="getThemeClass">
		<view class="compound-top" style="padding: 0; margin: 0;">
			<image class="goods-image" :src="msg.path" mode="widthFix"></image>
			<view class="card-bg image-bottom"></view>
		</view>
		<view class="compound-top card-bg" style="padding-top: 20rpx;">
			<view class="size-32 text-bold">{{ msg.title }}</view>
			<view class="text-content size-24 u-m-t-20" style="line-height: 30rpx;">简介：{{ msg.desc }}</view>
			<view class="flex align-center u-m-t-30">
				<view class="my-goods-num-box text-tips">
					<text class="goods-num-unit">发行总量：</text>
					<text class="goods-num">{{ msg.total_issue }}件</text>
				</view>
				<view class="my-goods-num-box u-m-l-50 text-tips">
					<text class="goods-num-unit">剩余库存：</text>
					<text class="goods-num">{{ msg.sur_issue }}件</text>
				</view>
				<view class="my-goods-num-box u-m-l-50 text-tips">
					<text class="goods-num-unit">冻结时间：</text>
					<text class="goods-num">{{msg.sale_expire? `${msg.sale_expire}分钟` : '无'}}</text>
				</view>
			</view>
		</view>
		<view class="compound-top card-bg">
			<view class="size-32 text-bold">合成碎片</view>
			<view class="compound-list flex flex-wrap">
				<view class="pos-re margin-right-25 u-m-t-30" v-for="(item,index) in list" :key="index">
					<image :src="item.cover" mode="aspectFill" class="compound-suipian"></image>
				</view>
			</view>
		</view>
		<view class="gap-30"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:'',
			msg:{},
			list:[]
		};
	},
	onLoad(data) {
		this.id = data.id||''
		this.loadData();
	},
	methods: {
		loadData() {
			this.$u.api.mix_join_log_detail({id: this.id}).then(res=>{
				this.msg = res.data.mix
				this.list = res.data.cast_list
			})
		},
	}
};
</script>

<style lang="scss">
.compound-top {
	width: 750rpx;
	margin: 0rpx 0rpx 30rpx 0rpx;
	margin-bottom: 40rpx;
	padding: 36rpx 24rpx;
	position: relative;
	// border-radius: 20rpx;
}
.compound-list{
	// padding-left: 30rpx;
	.pos-re{
		position: relative;
		.lock-box{
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, .5);
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.lock-icon{
				width: 45rpx;
				height: 45rpx;
			}
		}
	}
	.compound-suipian{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.compound-tag{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		background-color: #D9C19D;
		// color: #FFFFFF;
		color: #2B2E2E;
		font-size: 16rpx;
		padding: 5rpx 10rpx;
		border-radius: 0 10rpx 0 10rpx;
	}
}

.p-t-100 {
	padding-top: 100rpx;
}

.goods-image{
	width: 750rpx;
}
.image-bottom{
	width: 100%;
	height: 50rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 30rpx 30rpx 0 0;
}

.my-goods-num-box{
	font-size: 26rpx;
}
</style>
